<template>
  <div class="sjzl">
    <div class="space-around bdb pb20 pt20">
      <div class="flex align-center">
        <img
          class="image"
          :src="imgUrl + '/profile/personinfo/2023/9/22/基本农田_165944bcd0014f77a8e63305e23003ce.png'"
        />
        <div class="ml10 tac">
          <div class="fs18 bold">{{ dataInfo.landTotal ? parseFloat(dataInfo.landTotal).toFixed(2) : 0 }}</div>
          <div class="fs12 mt10">农田总面积(亩)</div>
        </div>
      </div>
      <div class="flex align-center">
        <img
          class="image"
          :src="imgUrl + '/profile/personinfo/2023/9/22/智慧农田_n_ef009236ad884b7c962c5d47da5636fa.png'"
        />
        <div class="ml10 tac">
          <div class="fs18 bold">
            {{ dataInfo.circulationLands ? parseFloat(dataInfo.circulationLands).toFixed(2) : 0 }}
          </div>
          <div class="fs12 mt10">流转农田(亩)</div>
        </div>
      </div>
    </div>
    <div class="space-between mt40">
      <div class="tac text-overflow">
        <div class="fs18 bold">{{ dataInfo.bigEscalation ? parseFloat(dataInfo.bigEscalation).toFixed(2) : 0 }}</div>
        <div class="fs12">大户上报种植(亩)</div>
      </div>
      <div class="tac text-overflow">
        <div class="fs18 bold">{{ dataInfo.manageNum || 0 }}</div>
        <div class="fs12">经营户(个)</div>
      </div>
      <div class="tac text-overflow">
        <div class="fs18 bold">{{ dataInfo.rate1 ? parseFloat(dataInfo.rate1).toFixed(2) : 0 }}%</div>
        <div class="fs12">农田种植率</div>
      </div>
      <div class="tac text-overflow">
        <div class="fs18 bold">{{ dataInfo.rate2 ? parseFloat(dataInfo.rate2).toFixed(2) : 0 }}%</div>
        <div class="fs12">流转种植率</div>
      </div>
    </div>
  </div>
</template>

<script>
import { allData } from '@/api/index'

export default {
  name: 'Sjzl',
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      dataInfo: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      allData().then((res) => {
        this.dataInfo = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sjzl {
  height: 213px;
}
.image {
  height: 60px;
  width: 60px;
}
</style>
